<template>
  <div>
    <div class="product_content">
      <div class="category_head_content">
        <div class="category_head_line"></div>
        <div class="category_head_title_content">
          <span style="font-size:13.5px;line-height:13.5px;font-weight:600;">{{content.title}}</span>
          <span style="font-size:12px;line-height:33px;font-weight:500">{{content.subTitle}}</span>
        </div>
      </div>
      <div class="product_bottom">
        <div  v-if="products.length!=0" >
          <row v-for="item in products" :product="item" :concise="concise"></row>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import row from './components/row'
  import { mapGetters } from 'vuex'
  import {list} from '@/api/product'
  import utils from '../../../../utils/utils'
  export default {
    name: 'conciseProductRow',
    data(){
      return{
        concise:true,
        products:[],
        pageSize: 2,
        pageNum: 1,
        tagIds: [],
      }
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    components:{
      row
    },
    props:[
      'content'
    ],
    created() {
      this.loadProduct()
    },
    methods:{
      loadProduct(){
        var _this = this
        if (!utils.isNull(this.content.tagids)) {
          this.tagIds = this.content.tagids.split(',');
          for (var i = 0; i < _this.tagIds.length; i++) {
            _this.tagIds[i] = parseInt(_this.tagIds[i])
          }
        }
        let params=new URLSearchParams()
        params.append('mchId', this.mchId);
        for (var i = 0; i < this.tagIds.length; i++) {
          params.append('tagIds',this.tagIds[i])
        }
        params.append('pageSize',10)
        list(params).then(res=>{
          res.data.data.forEach(item=>{
            if (utils.isNull(item.thumbnail)){
              item.thumbnail='http://cdnx.hulu.fj.cn/00/4B/rBD_P13d876ATFO4AAT07C99LBw961.jpg'
            }
          })
          this.products=res.data.data


        })
      },
    }
  }
</script>

<style scoped>
  /* pages/index/component/products/conciseProductRow.wxss */
  .product_content{
    padding: 10px;
    /* box-sizing: border-box; */
    /*width: 355px;*/
  }
  .category_head_content{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
  }
  .category_head_line{
    height: 35px;
    width: 5px;
    background-color: black;
    border-radius: 7.5px;
  }
  .category_head_title_content{
    display: flex;
    height: 26px;
    margin-left: 5px;
    flex-direction: column;
    justify-content: space-between;
  }
  .product_bottom{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }
</style>
